<template>
  <div class="approval-detail">
    <back-to-top
      transitionName="fade"
      :customStyle="myBackToTopStyle"
      :visibilityHeight="300"
      :backPosition="0"
    ></back-to-top>
    <history-apply-record></history-apply-record>
    <id-info></id-info>
    <social-info></social-info>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div style="padding: 5px; box-sizing: border;" class="work-info">
        <div class="head-title2">
          <div class="title">{{$t('approvalDetail.work')}}</div>
        </div>
        <div class="detail-info">
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.companyName')}}:</span>
            <span>{{idInfo.companyName}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.IndustryType')}}:</span>
            <span>{{idInfo.jobName}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 80px;">{{$t('approvalDetail.companyProvince')}}:</span>
            <span>{{idInfo.companyProvince}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.position')}}:</span>
            <span>{{idInfo.commonProfessional}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('customQuery.year')}}:</span>
            <span>{{idInfo.workYears}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 80px;">{{$t('approvalDetail.companyCity')}}:</span>
            <span>{{idInfo.companyCounty}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.salary')}}:</span>
            <span>{{idInfo.salary}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.companyTel')}}:</span>
            <span>{{idInfo.companyTel}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 80px;">{{$t('approvalDetail.companyTown')}}:</span>
            <span>{{idInfo.companyTown}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.companyNet')}}:</span>
            <span>{{idInfo.companyNet}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.companyZipCode')}}:</span>
            <span>{{idInfo.companyZipCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 80px;">{{$t('approvalDetail.companyArea')}}:</span>
            <span>{{idInfo.companyRegion}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.DetailedAddress')}}:</span>
            <span>{{idInfo.companyAddress}}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div style="padding: 5px; box-sizing: border;" class="emergency-contact"> 
        <div class="head-title2">
          <div class="title">{{$t('approvalDetail.urgent')}}</div>
        </div>
        <div style="padding-left: 12px;">
        <el-table
          :data="urgentContact"
          style="width: 100%;font-size: 12px;margin-top: 5px;"
          border
          stripe
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="contactsName"
            :label="$t('approvalDetail.contactsName')"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="mobile"
            :label="$t('approvalDetail.mobile')"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="relation"
            :label="$t('approvalDetail.relation')"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="addressBookStatus"
            :label="$t('approvalDetail.addressBookStatus')"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.addressBookStatus=== 1">{{$t('approvalDetail.pass')}}</span>
              <span v-if="scope.row.addressBookStatus=== 2">{{$t('approvalDetail.nopass')}}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="checkStatus"
            :label="$t('approvalDetail.checkStatus')"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.checkStatus=== 2">{{$t('approvalDetail.nohit')}}</span>
              <span v-if="scope.row.checkStatus=== 1" class="hit">
                {{$t('approvalDetail.hit')}}
                <a
                  href="javascript:void(0)"
                  @click.stop="lookUp(scope.row)"
                >{{$t('approvalDetail.hitsee')}}></a>
              </span>
            </template>
          </el-table-column>
        </el-table>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div style="padding: 5px; box-sizing: border;" class="personal-info">
        <div class="head-title2">
          <div class="title">{{$t('approvalDetail.personal')}}</div>
        </div>
        <div class="detail-info">
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.education')}}:</span>
            <span>{{idInfo.education}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.motherName')}}:</span>
            <span>{{idInfo.motherName}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.liveProvince')}}:</span>
            <span>{{idInfo.province}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.MailBox')}}:</span>
            <span>{{idInfo.email}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.MemberFamilyNum')}}:</span>
            <span>{{idInfo.familyNum}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.liveCity')}}:</span>
            <span>{{idInfo.country}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.LargeAreaCode')}}:</span>
            <span>{{idInfo.bigRegionCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.childrenNum')}}:</span>
            <span>{{idInfo.sonsNum}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.liveTown')}}:</span>
            <span>{{idInfo.town}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.CellNumber')}}:</span>
            <span>{{idInfo.smallRegionCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.HousingType')}}:</span>
            <span>{{idInfo.homeowner}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.liveArea')}}:</span>
            <span>{{idInfo.region}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.ZipCode')}}:</span>
            <span>{{idInfo.zipCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.HouseRent')}}:</span>
            <span>{{idInfo.rentalScopeCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.DetailedAddress')}}:</span>
            <span>{{idInfo.familyAddress}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.ResidenceTime')}}:</span>
            <span>{{idInfo.residenceTime}}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog :title="$t('approvalDetail.rlt')" :visible.sync="dialogTableVisible">
      <div class="custom-form">
        <div class="thead">
          <div>{{$t('approvalDetail.rltname')}}</div>
          <div>{{$t('approvalDetail.mobile')}}</div>
          <div>{{$t('approvalDetail.relation')}}</div>
          <div>{{$t('approvalDetail.loanstatus')}}</div>
        </div>
        <div class="tbody">
          <div>{{gridData.contactsName}}</div>
          <div>{{gridData.mobile}}</div>
          <div>{{gridData.relation}}</div>
          <div>{{gridData.status}}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false">{{$t('btn.close')}}</el-button>
      </span>
    </el-dialog>
    <locate-info></locate-info>
    <order-other-info v-on:applyAmtEvent="getApplyAmt"></order-other-info>
    <div style="text-align: center; padding: 20px 0;">
      <el-button type='primary' size='medium' @click='goBack'>{{$t('btn.back')}}</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getContact,
  getHit,
  getCustomerInfo
} from "api/trust/firstApprDetails/index";
export default {
  components: {
    "back-to-top": () => import("components/BackToTop"),
    "history-apply-record": () => import("./components/HistoryApplyRecord"),
    "id-info": () => import("./components/IdInfo"),
    "social-info": () => import("./components/SocialInfo"),
    "locate-info": () => import("./components/LocateInfo"),
    "order-other-info": () => import("./components/OrderOtherInfo")
  },
  data() {
    return {
      myBackToTopStyle: {
        right: "50px",
        bottom: "50px",
        width: "40px",
        height: "40px",
        "border-radius": "4px",
        "line-height": "45px", // 请保持与高度一致以垂直居中
        background: "#e7eaf1" // 按钮的背景颜色
      },
      listObj: {},
      lanStatus: null,
      idInfo: {},
      urgentContact: [],
      gridData: {
        contactsName: "",
        mobile: "",
        relation: "",
        status: ""
      },
      dialogTableVisible: false
    };
  },
  computed: {
    ...mapGetters(["elements", "language", "custQueryDetail"])
  },
  created() {
    if (this.language === "zh") {
      this.lanStatus = 1;
    } else if (this.language === "en") {
      this.lanStatus = 2;
    } else {
      this.lanStatus = 3;
    }
    this.getParamsDetail();
    this.workFn();
    this.emContactsFn();
  },
  methods: {
    getParamsDetail() {
      this.listObj = this.custQueryDetail;
    },
    // 工作信息
    workFn() {
      let workObj = {};
      workObj.userId = this.listObj.userId;
      workObj.orderId = this.listObj.orderId;
      workObj.msgType = this.lanStatus;
      workObj.userUUID = this.listObj.userUuid;
      getCustomerInfo(workObj).then(res => {
        if (JSON.stringify(res.data) === "{}") {
          this.idInfo = {};
        } else {
          this.idInfo = res.data.loanCustomerInfo;
        }
      });
    },
    // 获取审批额度
    getApplyAmt(data) {
      this.applyAmt = data;
    },
    // 紧急联系人
    emContactsFn() {
      //紧急联系人
      let contact = {};
      contact.orderId = this.listObj.orderId;
      contact.userId = this.listObj.userId;
      contact.userUuid = this.listObj.userUuid;
      contact.msgType = this.lanStatus;
      getContact(contact).then(res => {
        this.urgentContact = res.data;
      });
    },
    //查看
    lookUp(row) {
      //命中
      let hit = {};
      hit.mobile = row.mobile;
      getHit(hit).then(res => {
        this.gridData.contactsName = row.contactsName;
        this.gridData.mobile = row.mobile;
        this.gridData.relation = row.relation;
        switch (res.data.status) {
          case "100":
            this.gridData.status = this.$t("approvalDetail.registered");
            break;
          case "1":
            this.gridData.status = this.$t("approvalDetail.audit");
            break;
          case "2":
            this.gridData.status = this.$t("approvalDetail.credit");
            break;
          case "3":
            this.gridData.status = this.$t("approvalDetail.repayments");
            break;
          case "4":
            this.gridData.status = this.$t("approvalDetail.refused");
            break;
          case "5":
            this.gridData.status = this.$t("approvalDetail.clear");
            break;
        }
        this.dialogTableVisible = true;
      });
    },
    //返回
    goBack() {
      let view = {};
      view.name = this.$route.name;
      view.path = this.$route.path;
      this.$store.dispatch('delVisitedViews', view)
      this.$router.push('/customQuery')
    }
  }
};
</script>

<style scoped lang="scss">
input::-webkit-input-placeholder {
  font-size: 12px;
}
.approval-detail {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  position: relative;
}
.title {
  line-height: 22px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title:before {
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.el-table {
  z-index: 0;
}
.id-photo {
  padding: 20px;
  box-sizing: border-box;
  #image,
  #image2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  #image > div,
  #image2 > div {
    width: 30%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 3%;
    img {
      width: 100%;
    }
  }
}
.risk {
  font-size: 12px;
  .risk-item {
    padding: 20px 0 20px 28px;
    box-sizing: border-box;
    button {
      padding: 0 20px;
      height: 28px;
      outline: none;
      border-width: 0;
      border-radius: 4px;
      font-size: 12px;
      background: #ebf5ff;
      color: #20a0ff;
      border: 1px solid #abd5ff;
      margin-left: 50px;
    }
  }
}
.basic {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #ebeef5;
  margin-bottom: 40px;
  .basic-title {
    height: 40px;
    line-height: 40px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #ebeef5;
    padding-left: 28px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
  }
  .optional {
    display: flex;
    font-size: 12px;
    .optional-item {
      flex: 1;
      padding: 10px 0 10px 10%;
      box-sizing: border-box;
      border-right: 1px solid #ebeef5;
      &:last-child {
        border: none;
      }
      & > div {
        line-height: 25px;
        span:nth-child(1) {
          margin-right: 5px;
          color: #616264;
        }
        span:nth-child(2) {
          color: #8a8a8c;
        }
      }
    }
  }
}
.hit {
  color: red;
  & > a {
    position: absolute;
    right: 10px;
    color: #20a0ff;
    text-decoration: underline;
  }
}
.custom-form {
  width: 100%;
  text-align: center;
  .thead {
    line-height: 45px;
    display: flex;
    font-weight: bold;
    & > div {
      flex: 1;
      border-left: 1px solid #eee;
      border-top: 1px solid #eee;
      &:last-child {
        border-right: 1px solid #eee;
      }
    }
  }
  .tbody {
    line-height: 45px;
    display: flex;
    & > div {
      flex: 1;
      border-left: 1px solid #eee;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-right: 1px solid #eee;
      }
    }
  }
}
.pagination-container {
  width: 92%;
  margin-left: 4%;
  margin-bottom: 20px;
}
.href {
  border-bottom: 1px solid #000;
  cursor: pointer;
  color: #20a0ff;
  border-bottom: 1px solid #20a0ff;
}
.back {
  margin-top: 40px;
  margin-bottom: 80px;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    &:nth-child(2) {
      margin-left: 10px;
      background: #ebf5ff;
      color: #20a0ff;
      border: 1px solid #abd5ff;
    }
  }
}
.el-table .warning-row {
  background: rgb(58, 230, 52);
}
.head-title2 {
  display: flex;
  justify-content: space-between;
}
.detail-info {
  flex: 7;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
  margin-left: 12px;
  .detail-info-item {
    width: 33%;
    line-height: 25px;
    display: flex;
    padding-right: 20px;
    box-sizing: border-box;
    span:nth-child(1) {
      display: inline-block;
      width: 110px;
      text-align: left;
      margin-right: 5px;
      color: #616264;
    }
    span:nth-child(2) {
      color: #8a8a8c;
      display: inline-block;
      line-height: 25px;
    }
  }
}
.bg1 {
  background:#98e48b;
}
</style>